<style>
.el-transfer-panel {
    width: 250px;
}
.el-transfer-panel__list.is-filterable {
    width: 250px;
}
.user-select .el-dialog__body{
    padding: 6px 10px;
}
.user-select .custome-container{
    padding: 10px 20px 0px 20px;
}
</style>
<template>
    <el-dialog
        v-bind:title="titleName"
        :visible="uvisible"
        :modal="true"
        width="60%"
        :show-close="true"
        class="user-select"
        :destroy-on-close="true"
        :before-close="handleDialogClose"
        top="11vh"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        append-to-body
    >
        <div class="table" align="center">
            <el-form ref="searchForm" :model="searchData">
                <div class="container custome-container">
                    <div class="handle-box custome-handle-box">
                        <el-row :gutter="5">
                            <el-col :span="4" style="margin-top: 7px;">
                                <el-checkbox-group :min="1" v-model="checked">
                                    <el-checkbox style="margin-right: 10px;" label="稽核"></el-checkbox>
                                    <el-checkbox label="业务"></el-checkbox>
                                </el-checkbox-group>
                            </el-col>
                            <el-col :span="11">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="组织机构" id="treeSelect" prop="bsf001">
                                        <SelectTree
                                            ref="tree"
                                            :props="props"
                                            :options="optionData"
                                            :clearable="isClearable"
                                            :value="searchData.queryBsf001"
                                            :accordion="isAccordion"
                                            @getValue="zzjgTree($event)"
                                            style="width:77%"
                                        ></SelectTree>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="姓名" prop="user_name"><el-input v-model="searchData.user_name" style="width:74%;" placeholder="请输入姓名"></el-input></el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="2">
                                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <ces-table
                        ref="cesTable"
                        :tableHeight="tableHeight"
                        :that="that"
                        size="mini "
                        :isSelection="true"
                        :isIndex="true"
                        :isHandle="true"
                        :tableData="tableData"
                        :tableCols="tableCols"
                        :isPagination="false"
                        :defaultSelections="defaultSelections"
                        @handleSelectionChange="handleSelectionChange"
                    ></ces-table>
                </div>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer" id="button" style="text-align: center;display:block;">
            <el-button type="primary" @click="doOk">确定</el-button>
            <el-button @click="close">取 消</el-button>
        </span>
    </el-dialog>
</template>
<script>
import SelectTree from '../../../common/treeSelect';
import cesTable from '../../../../views/common/Table';
const dateFields = []; //定义时间字段常量
export default {
    name: 'edit',
    
    views: {
        SelectTree,
        cesTable
    },
    props: {
        titleName: {
            type: String,
            default: ''
        },
        uvisible: {
            type: Boolean,
            default: false
        },
        data: {
            type: String,
            default: ''
        }
    },
    mounted() {
        this.getPages()
        this.getFxjg()

        let _this = this;
        document.onkeydown = function(e) {
            if (e.keyCode === 13) {
                _this.search();
            }
        };
    },
    data() {
        return {
            that: this,
            readonly: false,
            usersPk: '',
            checked: ['稽核','业务'],
            tableHeight: window.innerHeight - 320,
            searchData: {
                bsf001: '',
                user_name: '',
                queryBsf001: ''
            },
            tree_url: '/jggl/organTree/getOrganTree', //获取机构数据
            url_page: '/auth/user/queryList',
            select_word: '',
            selectorShow: true,
            //${树形组件}-初始化参数变量
            isClearable: true, // 可清空（可选）
            isAccordion: true, // 可收起（可选）
            props: {
                // 配置项（必选）
                value: 'id',
                label: 'name',
                children: 'children'
            },
            // ${树形组件}-选项列表（必选）
            treeList: [],
            multipleSelection: [],
            dics: {},
            // 表头及字段
            tableCols: [
                {
                    label: 'ID',
                    prop: 'user_pk',
                    hidden: true
                },
                {
                    label: '姓名',
                    prop: 'user_name',
                    width: '160'
                },
                {
                    label: '机构名称',
                    prop: 'bsf001'
                }
            ],
            defaultSelections: [],
            tableData: [], //表格数据
            jg: {
                syjg: [],
                jhjg: [],
                ywjg: []
            },
        };
    },

    methods: {
        setSelected() {
            if (this.data) {
                let userArry = [];
                this.tableData.forEach(tVal => {
                    if (this.data.indexOf(tVal.user_pk) != -1) {
                        userArry.push(tVal);
                    }
                });
                this.defaultSelections = userArry;
            }
        },
        //查询所有机构信息
        getFxjg() {
            let _this_ = this;
            this.$post(this.tree_url, {}).then(res => {
                if (res.data) {
                    if (res.data.length > 0) {
                        var ms_qhjb = localStorage.getItem("ms_qhjb");
                        var ms_qhdm = localStorage.getItem("ms_qhdm");
                        if (ms_qhdm && ms_qhjb) {
                            if (ms_qhjb === '1') {
                                this.jg.syjg = res.data;
                            } else {
                                _this_.jg.syjg = [];
                                for (var i = 0; i < res.data.length; i++) {
                                    if (res.data[i].levl !== '1' && ms_qhdm.substr(0, 4) === res.data[i].xzqh.substr(0, 4)) {
                                        _this_.jg.syjg.push(res.data[i]);
                                    } else if (res.data[i].levl === '1') {
                                        _this_.jg.syjg.push(res.data[i]);
                                    }
                                }
                            }
                            for (let i = 0; i < _this_.jg.syjg.length; i++) {
                                if (_this_.jg.syjg[i].aab019 === '0') {
                                    _this_.jg.jhjg.push(_this_.jg.syjg[i]);
                                } else if (_this_.jg.syjg[i].aab019 === '1') {
                                    _this_.jg.ywjg.push(_this_.jg.syjg[i]);
                                }
                            }
                            for (let j = 0; j < _this_.jg.jhjg.length; j++) {
                                _this_.jg.jhjg[j].name = _this_.jg.jhjg[j].name.replace("稽核部门", "");
                                if (_this_.jg.jhjg[j].id === '1') {
                                    _this_.jg.jhjg[j].disabled = true;
                                }
                            }
                            _this_.treeList = _this_.jg.jhjg;
                        }
                    }
                }
            });
        },
        // ${树形组件}-取值
        zzjgTree(value) {
            this.searchData.queryBsf001 = value;
        },
        //选中table行
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //弹窗编辑完后刷新列表页面在子页面调用改方法
        refresh() {
            this.$refs.tree.clearHandle();
            this.searchData.user_name = '';
            this.searchData.queryBsf001 = '';
            this.multipleSelection = [];
            this.getPages();
        },
        // 获取分页数据
        getPages() {
            this.fillAllBsf001();
            this.$post(this.url_page, this.searchData).then(res => {
                if (res.data) {
                    this.tableData = res.data
                    this.setSelected()
                }
            });
        },
        fillAllBsf001(){
            if (this.searchData.queryBsf001) {
                var xzqh = '';
                for (let i = 0; i < this.jg.syjg.length; i++) {
                    if (this.searchData.queryBsf001 === this.jg.syjg[i].id) {
                        xzqh = this.jg.syjg[i].xzqh;
                    }
                }
                if (xzqh){
                    this.searchData.bsf001 = '';
                    if (this.checked.length === 2) {
                        for (let l = 0; l < this.jg.jhjg.length; l++) {
                            if (xzqh === this.jg.jhjg[l].xzqh) {
                                this.searchData.bsf001 = "'" + this.jg.jhjg[l].id + "'";
                            }
                        }
                        for (let m = 0; m < this.jg.ywjg.length; m++) {
                            if (xzqh === this.jg.ywjg[m].xzqh) {
                                if (this.searchData.bsf001) {
                                    this.searchData.bsf001 = this.searchData.bsf001 + ",'" + this.jg.ywjg[m].id + "'";
                                } else {
                                    this.searchData.bsf001 = this.jg.ywjg[m].id;
                                }
                            }
                        }
                    } else if (this.checked[0] === '稽核') {
                        for (let l = 0; l < this.jg.jhjg.length; l++) {
                            if (xzqh === this.jg.jhjg[l].xzqh) {
                                this.searchData.bsf001 = this.jg.jhjg[l].id;
                            }
                        }
                    } else if (this.checked[0] === '业务') {
                        for (let m = 0; m < this.jg.ywjg.length; m++) {
                            if (xzqh === this.jg.ywjg[m].xzqh) {
                                this.searchData.bsf001 = this.jg.ywjg[m].id;
                            }
                        }
                    }
                }
            } else {
                this.searchData.bsf001 = '';
                if (this.checked.length === 2) {
                    this.searchData.aab019 = '';
                } else if (this.checked[0] === '稽核') {
                    this.searchData.aab019 = '0';
                } else if (this.checked[0] === '业务') {
                    this.searchData.aab019 = '1';
                }
            }
        },
        /*搜索查询*/
        search() {
            this.getPages();
        },
        /*格式化日期*/
        parseDate(dateStr) {
            return dateStr instanceof Date ? dateStr : this.$dateFormat(dateStr);
        },
        /*重置表单*/
        reset(formName) {
            this.$refs[formName].resetFields();
        },

        doOk() {
            let userList = this.multipleSelection;
            if (userList.length == 0) {
                this.$message({
                    type: 'error',
                    message: '请选择人员！'
                });
            } else {
                this.$emit('selectUser', userList);
                this.close();
            }
        },

        //右上角关闭事件
        handleDialogClose() {
            this.close();
        },
        //关闭窗口方法
        close() {
            this.u_visible = false;
            this.$emit('cleanUser');
            this.refresh();
        }
    },
    computed: {
        /* ${树形组件}-转树形数据 */
        optionData() {
            //对源数据深度克隆
            let cloneData = JSON.parse(JSON.stringify(this.treeList));
            //循环所有项，并添加children属性
            return cloneData.filter(father => {
                //返回每一项的子级数组
                let branchArr = cloneData.filter(child => father.id == child.parentId);
                //给父级添加一个children属性，并赋值
                branchArr.length > 0 ? (father.children = branchArr) : '';
                //返回第一层
                return father.parentId == 0;
            });
        }
    }
};
</script>

<style scoped>
@import '../../../../assets/css/common.css';
</style>
